<script setup lang="ts">
import { getCourseList } from '@/api/user';
import { onMounted } from 'vue';
function onClickLeft() {
    history.back()
}
import { ref } from 'vue';
import type { Ref } from 'vue';
// const courseList: Ref<string[]> = ref([])
interface iCourse {
    id: number;
    courseTitle: string;
    courseteacher: string;
    coursename: string;
}
const courseList: Ref<Array<iCourse>> = ref([]);
onMounted(() => {
    getCourseList({}).then(res => {
        console.log(4, res.data.courseList);
        courseList.value = res.data.courseList
    })
})
</script>
<template>
    <div class="center">

        <header>
            <van-nav-bar left-text="返回" title="课程设计列表" left-arrow @click-left="onClickLeft" />
        </header>
        <main>
            <van-cell title="绘画·兴趣" />
            <div v-for="item in courseList" :key="item.id" class="courselist">
                <div class="left">
                    <van-image width="100" height="100" src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" />
                </div>
                <div class="right">
                    <p style="font-size: 0.16rem;margin-bottom: 0.1rem">{{ item.coursename }}</p>
                    <p>{{ item.courseteacher }}</p>
                    <p>
                        <van-image style="width: 12px;"
                            src="https://cdn7.axureshop.com/demo2023/2246171/images/11-%E8%AF%BE%E7%A8%8B%E5%88%97%E8%A1%A8-%E8%AE%BE%E8%AE%A1it/%E5%BD%A2%E7%8A%B6_u546.svg">

                        </van-image> <span style="display: inline-block;width: 160px;">5K学员 &#X3000; &#X3000;⭐4.8
                        </span>
                    </p>
                    <!-- <router-link to="/home/summary/${item.id}"></router-link> -->
                </div>
            </div>

        </main>
    </div>
</template>
<style scoped lang="scss">
.center {
    header {
        height: 50px;
    }
    main {
        height: calc(100vh - 50px);
        overflow: auto;
    }
}

.courselist {
    box-sizing: border-box;
    padding: 2vw 2vw 2vw 4vw;
    display: flex;

    .left {
        width: 100px;
        margin-right: 2vw;

        img {
            width: 100%;
            height: 100%;
        }
    }

    .right {
        flex: 1;

        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
}
</style>